<template>
    <UxDialog class="sync-store" :visible="value" :beforeClose="beforeClose" @show="onShow()" @close="onClose()">

        <UxLoading2 :loading="loading" v-if="loading" />

        <!-- 没有店铺时关联店铺 -->
        <div class="async-empty" v-else-if="stores.length == 0">
            <figure><img src="@/assets/images/synchronize/dialog-store-empty.png"></figure>
            <strong>No store connected</strong>
            <span>You can add products to your online store once you have connected your store to PODpartner</span>
            <button @click="addShop()" type="secondary">
                <svg-icon name="user-store-connect" />
                <span>Connect</span>
            </button>
        </div>

        <!-- 有店铺 -->
        <div class="async-list" v-else>
            <h2>Add products to store</h2>
            <ul>
                <li v-for="item in stores" :key="item.id" :error="item.shop_state == 2 ? 'error' : ''" @click="selectItem(item)">
                    <StoreIconName :item="item" />
                </li>
            </ul>
        </div>
    </UxDialog>
</template>

<script>
export default {
    props: {
        value: { type: Object, default: {} },
        beforeClose: { type: Function, default: () => null },
    },
    data () {
        return {
            loading: true,
            stores: [],
        };
    },
    methods: {
        onShow () {
            this.stores.length == 0 && this.getStore();
        },
        onClose () {
            this.$emit("input", null);
        },
        // 添加店铺
        addShop () {
            this.$router.push("/user/store");
        },

        // 选中跳转
        selectItem (item) {

            if (item.shop_state == 2) {
                // 失效的店铺
                this.$router.push({
                    path: "/user/store",
                    query: { shop_id: item.id },
                });

            } else {
                let design_id = this.value.id;
                let shop_id = item.id;
                this.$router.push({
                    path: "/synchronize",
                    query: { tempid: design_id, shopid: shop_id },
                });
            }
        },

        async getStore () {
            this.loading = true;

            let response = await this.$http("UserStore.getAllLinkStore");
            if (response.code == 0) {
                this.loading = false;
                this.stores = response.data || []
                // this.$uxMessage.success(response.msg || "success");
            } else {
                this.loading = false;
                this.$uxMessage.error(response.msg || "error");
                // 提示
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.dialog-layout {
    .loading,
    .async-empty,
    .async-list {
        width: 600px;
        min-height: 400px;
        box-sizing: border-box;
    }

    .loading {
        position: relative;
        background: none;
        z-index: 0;
    }
}

.async-empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 400px;

    figure {
        width: 204px;
        height: 42px;
        img {
            width: 100%;
            height: 100%;
        }
    }

    & > strong {
        margin-top: 38px;
        font-size: 16px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 20px;
    }

    & > span {
        margin-top: 10px;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #292929;
        line-height: 18px;
        max-width: 400px;
        text-align: center;
    }

    button {
        margin-top: 22px;
        width: 120px;
        height: 36px;
        border-radius: 8px;

        svg {
            width: 16px;
            height: 16px;
            margin-right: 4px;
        }
    }
}

.async-list {
    position: relative;
    box-sizing: border-box;
    padding: 24px;

    & > h2 {
        font-size: 16px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 20px;
    }

    ul {
        margin-top: 20px;
        li {
            height: 36px;
            border-radius: 8px;
            border: 1px solid #e6e6e6;
            display: flex;
            align-items: center;
            padding: 0 8px;
            cursor: pointer;
            transition: background 0.2s;

            & + li {
                margin-top: 10px;
            }

            &:hover {
                background: #f6f6f6;
            }

            &[error='error'] .shop-name {
                color: #9e9e9e;

                &::v-deep em {
                    display: flex;
                    color: #c62828;
                }
            }
        }
    }
}
</style>
